<template>
    <div id="scatter">
      <vue-draggable-resizable
          @dragging="onDrag"
          @resizing="onResize"
          @activated="onActivated(item)"
          @deactivated="onDeactivated(item)"
          :parent="true"
          :x='item.settings.position.x'
          :y='item.settings.position.y'
          :w='item.settings.size.width'
          :h='item.settings.size.height'
          :lock-aspect-ratio="item.lockSize"
          class-name-active="activeClass"
        >
        <v-chart :options="item.settings.options" :autoresize="true"/>
 <p>X: {{ item.settings.position.x }} / Y: {{ item.settings.position.y }} - Width: {{ item.settings.size.width }} / Height: {{ item.settings.size.height }}</p>
        </vue-draggable-resizable>
    </div>
</template>

<style scoped>
/**
 * 默认尺寸为 600px×400px，如果想让图表响应尺寸变化，可以像下面这样
 * 把尺寸设为百分比值（同时请记得为容器设置尺寸）。
 */
.echarts {
  width: 100%;
  height: 100%;
}
.echartParent {
  width: 100%;
  height: 100%;
}
 #scatter {
  width: 100%;
  height: 100%;
}
.activeClass{
  z-index:999!important;
}
</style>

<script>
import ECharts from 'vue-echarts'
import store from "@/vuex/store.js"
export default {
  components: {
    'v-chart': ECharts
  },
  data () {
      return{
        item:{
          lockSize:false,
          type:'scatter',
          settings:{
            position:{x:807.5,y:387.5},
            size:{width:305,height:305},
            options:{
                // backgroundColor:'rgba(256, 256, 256, 1)' ,
                xAxis: {},
                yAxis: {},
                series: [{
                    symbolSize: 20,
                    data: [
                        [10.0, 8.04],
                        [8.0, 6.95],
                        [13.0, 7.58],
                        [9.0, 8.81],
                        [11.0, 8.33],
                        [14.0, 9.96],
                        [6.0, 7.24],
                        [4.0, 4.26],
                        [12.0, 10.84],
                        [7.0, 4.82],
                        [5.0, 5.68]
                    ],
                    type: 'scatter'
                }]
            }
          },
        },
          
      }
  },
  created() {
    
  },
  methods:{
      onResize: function (x, y, width, height) {
        this.item.settings.position.x = x
        this.item.settings.position.y = y
        this.item.settings.size.width = width
        this.item.settings.size.height = height

         /* 缩放右击盒子跟随 */
        document.getElementById('mouseBox').style.top = (this.item.settings.position.y+this.item.settings.size.height/2)+'px';     
        document.getElementById('mouseBox').style.left = (this.item.settings.position.x+this.item.settings.size.width/2)+'px';   
      },
      // onResizeStop: function (x, y, width, height) {
      //   store.state.items[this.currentItem.index].settings.position.x=x
      //   store.state.items[this.currentItem.index].settings.position.y=y
      //   store.state.items[this.currentItem.index].settings.size.width=width
      //   store.state.items[this.currentItem.index].settings.size.height=height
      // },
      onDrag: function (x, y) {
        this.item.settings.position.x = x
        this.item.settings.position.y = y

         /* 拖动右击盒子跟随 */
        document.getElementById('mouseBox').style.top = (this.item.settings.position.y+this.item.settings.size.height/2)+'px';     
        document.getElementById('mouseBox').style.left = (this.item.settings.position.x+this.item.settings.size.width/2)+'px';   
      },
      // onDragStop: function (x, y) {
      //   store.state.items.forEach(item => {
      //     if(item.type === this.currentItem.type && item.index === this.currentItem.index){
      //       item.settings.position.x=x
      //       item.settings.position.y=y
      //     }
      //   });
      // },
      onActivated(item){
        store.state.active = true;
        this.$parent.getCurrentItem(item);
         $(".echarts").on( "contextmenu", ()=>{
              document.getElementById('mouseBox').style.top = (this.item.settings.position.y+this.item.settings.size.height/2)+'px';    
              document.getElementById('mouseBox').style.left = (this.item.settings.position.x+this.item.settings.size.width/2)+'px';    
              document.getElementById('mouseBox').style.display = 'block';        //显示div盒子
        });
      },
      onDeactivated () {
        store.state.active = false;
        
      },
      destroy(){
        this.$destroy();
        $('#echart').remove()
      }
  }
}
</script>